<template>
	<view class="password-page">
		<view class="form-block">
			<view class="form-item">
				<view class="iconfont icon-yanzhengma" style="font-size: 38rpx;"></view>
				<input placeholder="请输入旧密码" v-model.trim="form.password" class="form-crl" maxlength="11"
					type="password" />
			</view>
			<view class="form-item">
				<view class="iconfont icon-yanzhengma" style="font-size: 38rpx;"></view>
				<input placeholder="请输入新密码" v-model.trim="form.newPassword" class="form-crl" maxlength="11"
					type="password" />
			</view>
			<view class="form-item">
				<view class="iconfont icon-yanzhengma" style="font-size: 38rpx;"></view>
				<input placeholder="请再输入新密码" v-model.trim="form.confirmPassword" class="form-crl" maxlength="11"
					type="password" />
			</view>
			<view class="btn-item" @click="handleChangePassword">确认修改</view>
		</view>

	</view>
</template>

<script>
	import {
		changePassword
	} from '@/api/user'
	const passwordTest = function(pwd) {
		if (pwd.length < 8) return false;

		let hasDigit = /[0-9]/.test(pwd);
		let hasLetter = /[a-zA-Z]/.test(pwd);
		let hasSymbol = /[^a-zA-Z0-9]/.test(pwd);

		let count = [hasDigit, hasLetter, hasSymbol].filter(Boolean).length;

		return count >= 2;
	}
	export default {
		data() {
			return {
				form: {
					password: '',
					newPassword: '',
					confirmPassword: '',
				}
			}
		},
		methods: {
			handleChangePassword() {
				if (!this.form.password) {
					this.showToast('请输入旧密码')
					return
				}
				if (!this.form.newPassword) {
					this.showToast('请输入新密码')
					return
				}
				if (!this.form.confirmPassword) {
					this.showToast('请再输一遍新密码')
					return
				}
				if (this.form.password === this.form.newPassword) {
					this.showToast('新密码不能与旧密码相同')
					return
				}
				if (!passwordTest(this.form.newPassword)) {
					this.showToast('新密码不能少于8位，且至少包含数字、字母、符号其中两种')
					return
				}
				if (this.form.newPassword !== this.form.confirmPassword) {
					this.showToast('两次输入的密码不一致')
					return;
				}
				uni.showLoading({
					title: '修改中',
					mask: true
				})
				changePassword({
					password: this.form.password,
					newPassword: this.form.newPassword
				}).then(() => {
					this.showToast('修改成功', () => {
						uni.navigateBack()
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.password-page {
		width: 100vw;
		height: 100vh;
		background: #F5F5F5;

		.form-block {
			width: 100%;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.name {
				width: 100%;
				font-weight: bold;
				font-size: 38rpx;
			}

			.form-item {
				display: flex;
				align-items: center;
				background-color: #ffffff;
				width: 100%;
				height: 100rpx;
				margin-top: 40rpx;
				padding: 0 30rpx;
				border-radius: 60rpx;

				.iconfont {
					font-size: 34rpx;
					margin-right: 30rpx;
				}

				.small-btn {
					position: absolute;
					width: 210rpx;
					height: 70rpx;
					right: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 60rpx;
					font-size: 28rpx;
				}
			}

			.btn-item {
				width: 100%;
				height: 90rpx;
				margin-top: 10rpx;
				border-radius: 60rpx;
				background: #3175ff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ffffff;
				margin-top: 80rpx;
			}

			.type {
				margin-top: 80rpx;
				font-size: 30rpx;
			}
		}
	}
</style>